<template>
  <div class="yue">
    <Header>
        <template slot="left">
          <svg-icon iconClass="back" @click="$router.go(-1)"></svg-icon>
        </template>
        <template slot="center">
          <p>余额</p>
        </template>
        <template slot="right">
          <p style="visibility:hidden">秒杀</p>
        </template>
      </Header>
    <main>
      <div class="all_num">
        <div class="all_num_top">
          <dl>
            <dd>总余额(元)</dd>
            <dd>0.00</dd>
          </dl>
          <button>充值</button>
        </div>
        <div class="all_num_bottom">
          <dl>
            <dd>累计充值(元)</dd>
            <dd>0</dd>
          </dl>
          <dl>
            <dd>累计消费(元)</dd>
            <dd>0</dd>
          </dl>
        </div>
      </div>
      <div class="icon_title">
        <dl @click="$router.push('/cardlist')">
          <dt>
            <svg-icon iconClass="yhk"/>
          </dt>
          <dd>银行卡</dd>
        </dl>
        <dl @click="$router.push('/layout/paylist')">
          <dt>
            <svg-icon iconClass="xfjl"/>
          </dt>
          <dd>消费记录</dd>
        </dl>
        <dl>
          <dt>
            <svg-icon iconClass="jfzx"/>
          </dt>
          <dd>积分中心</dd>
        </dl>
      </div>
      <div class="odl">
        <dl>
          <dd>
            <h3>签到零积分</h3>
            <p>赚积分抵现金</p>
          </dd>
          <dt>
             <img src="../../../img/lw.png" alt="">
          </dt>
        </dl>
        <dl>
          <dd>
            <h3>签到零积分</h3>
            <p>赚积分抵现金</p>
          </dd>
          <dt>
             <img src="../../../img/hb.png" alt="">
          </dt>
        </dl>
      </div>
      <van-divider :style="{ color: '#f73e2b', borderColor: '#f8582a', padding: '0 16px' }">热门推荐</van-divider>
      <div class="hot" :style="{height:this.shopHeight}">
        <dl v-for="(item,index) in shopList" :key="item.id" ref="idl" :style="styleList[index]">
          <dt>
            <img src="@/img/1.png" alt="" :style="{height:heightList[index]}">
          </dt>
          <dd>
            <h2>{{ item.title }}</h2>
            <p>{{ item.desc }}</p>
            <span>￥{{ item.price }}</span>
          </dd>
        </dl>
      </div>
      <van-divider :style="{ color: '#f73e2b', borderColor: '#f8582a', padding: '0 16px' }">到底了</van-divider>
    </main>
  </div>
</template>
<script>
export default {
  data() {
    return {
      shopList: [], //所有商品
      MAX_height: 255, //最大高度
      Min_height: 200,
      styleList: [], //样式列表
      heightList: [], //每张图片的高度
      shopHeight: 0, //列表盒子的高度
    }
  },
  created() {
    
    this.$store.dispatch('set_detaillist')
    this.shopList = this.$store.state.list
    this.getAllHeight()
    this.$nextTick(() => {
      this.setStyle()
    })
  },
  methods: {
    getAllHeight() {
      //图片大小生成
      this.shopList.forEach(() => {
        this.heightList.push(
          Math.floor(
            Math.random() * (this.MAX_height - this.Min_height - 1) +
              this.Min_height
          ) + 'px'
        )
      })
    },
    setStyle() {
      let leftHeight = 0 //dl距离盒子左侧顶部的高度
      let rightHeight = 0 //dl距离盒子右侧顶部的高度
      let omargin = 30 //dl之间的margin
      this.$refs.idl.forEach((item) => {
        //遍历每一个dl
        let ostyle = {} //准备一个样式对象
        if (leftHeight <= rightHeight) {
          //左边顶部的高<=右边顶部的高
          ostyle = {
            //顶位到左边
            top: leftHeight + omargin + 'px',
            left: '0',
          }
          leftHeight += item.clientHeight * 1 + omargin //重新计算顶部的高度
        } else {
          ostyle = {
            //顶位到右边
            top: rightHeight + omargin + 'px',
            right: '0',
          }
          rightHeight += item.clientHeight * 1 + omargin //重新计算高度
        }
        this.shopHeight = leftHeight ? leftHeight + 'px' : rightHeight + 'px' //重新计算父元素的高低
        this.styleList.push(ostyle) //将每一个dl的样式加入样式数组
      })
    },
  },
}
</script>
<style lang="scss" scoped>
@import '../../../assets/css/style.scss';
.yue {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  main {
    width: 100%;
    height: 100%;
    padding: px2rem(20) 0;
    overflow-y: auto;

    background: #eee;
    .all_num {
      width: 95%;
      height: auto;
      margin: 0 auto;
      margin-bottom: px2rem(20);
      border-radius: px2rem(10);
      background: linear-gradient(to right, red, #f8612c);
      font-size: px2rem(16);
      padding: px2rem(15);
      .all_num_top {
        width: 100%;
        display: flex;
        justify-content: space-between;
        dl {
          dd:first-child {
            color: #ccc;
            margin-bottom: px2rem(5);
          }
          dd:last-child {
            font-size: px2rem(25);
            color: #fff;
          }
        }
        button {
          border: 0;
          background: #fff;
          color: red;
          width: px2rem(80);
          height: px2rem(30);
          border-radius: px2rem(30);
        }
      }
      .all_num_bottom {
        margin-top: px2rem(25);
        display: flex;
        justify-content: space-between;
        dl {
          width: 50%;
          dd:first-child {
            color: #ccc;
            margin-bottom: px2rem(5);
          }
          dd:last-child {
            font-size: px2rem(25);
            color: #fff;
          }
        }
      }
    }
    .icon_title {
      width: 95%;
      height: auto;
      margin: 0 auto;
      background: #fff;
      padding: px2rem(10);
      display: flex;
      justify-content: space-around;
      font-size: px2rem(18);
      color: #f8612c;
      border-radius: px2rem(20);
      dl {
        text-align: center;
        dt {
          color: #f8612c;
          font-size: px2rem(25);
        }
      }
    }
    .odl {
      display: flex;
      width: 95%;
      height: auto;
      margin: px2rem(15) auto;
      justify-content: space-between;
      dl {
        width: 49%;
        height: px2rem(100%);
        font-size: px2rem(16);
        background: rgba(255, 245, 240, 1);
        padding: px2rem(10);
        margin: px2rem(10) 0;
        display: flex;
        dt {
          width: 40%;
          img {
            width: 100%;
          }
        }
        dd {
          line-height: px2rem(34);
          h3 {
            font-size: px2rem(18);
            color: #df693f;
          }
          p {
            color: #f8612c;
            font-size: px2rem(15);
          }
        }
      }
    }
    .hot {
      width: 95%;
      height: auto;
      padding: px2rem(10);
      margin: px2rem(15) auto;
      margin-bottom: px2rem(75);
      position: relative;
      background: #eee;
      dl {
        position: absolute;
        width: 48%;
        height: auto;
        background: #fff;
        border-radius: px2rem(20);
        padding: px2rem(10);
        dt {
          width: 100%;
        }
        dd {
          text-indent: px2rem(3);
          font-size: px2rem(18);
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          line-height: px2rem(30);
          text-align: center;
          h2 {
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            text-indent: px2rem(10);
          }
          p {
            color: #d87a57;
            font-size: px2rem(14);
          }
          span {
            color: red;
          }
        }
      }
    }
  }
}
</style>
